<template>
  <el-container>
    <el-header class="elheader">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 style="line-height: 60px; color: white">
            图书销售管理
          </h3>
        </el-col>
        <el-col :span="13">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :router="true"
          >
            <el-menu-item index="/home" style="margin-left: 150px"
              >主页</el-menu-item
            >
            <el-menu-item index="/home/details/:id">商品详细</el-menu-item>
            <el-menu-item index="/home/cart">购物车</el-menu-item>
            <el-menu-item index="/home/myorder">我的订单</el-menu-item>
            <el-menu-item index="/home/personal">个人信息设置</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4">
          <el-avatar :size="50" :src="`${$Imgurl}/api/public/showImg/${circleUrl}`"></el-avatar>
          <el-button type="text" @click="btn()">{{denglu}}</el-button>
        </el-col>
        <el-col :span="1">
          <span style="line-height: 60px" @click="tuichu()">退出</span>
        </el-col>
      </el-row>
    </el-header>
    <router-view></router-view>
    <!--  -->
    <el-dialog v-model="dialogTableVisible" width="30%">
      <span style="position: absolute; top: 8%; left: 47%; font-size: 18px"
        >登录</span
      >
      <div>
        <el-form ref="form" :model="form">
          <div style="display: flex; line-height: 40px; text-align: center">
            <label style="width: 12%;">账号</label>
            <div style="width: 90%">
              <el-input autocomplete="off" v-model="form.username"></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 40px; text-align: center">
            <label style="width: 12%">密码</label>
            <div style="width: 90%">
              <el-input
                type="password"
                autocomplete="off"
                v-model="form.password"
              ></el-input>
            </div>
          </div>
          <div style="text-align: center; margin-top: 40px">
            <el-button>取消</el-button>
            <!-- <el-button type="primary" @click="toLogin()">确定</el-button> -->
            <el-button :plain="true" type="primary" @click="toLogin()"
              >确定</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
// 引入拦截器
import instance from "../ajax/index.js";
import { ElMessage } from "element-plus";
// 引入Main组件
//
// import Detail from './page/Detail';
// //
// import DetailList from './page/DetailList';
// //
// import Cart from './page/Cart';
export default {
  name: "Home",
  data() {
    return {
	  denglu:'未登录',
      dialogTableVisible: false,
      activeIndex: "1",
      // circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
	  circleUrl:"",
      form: {
        username: "",
        password: "",
        grant_type: "password", //获取token采用密码模式
        client_id: "sobook4", //应用ID
        client_secret: "444444", //密钥
      },
    };
  },
  created(){
	// this.circleUrl = this.$store.state.img;
  },
  methods: {
    // 登录函数
    toLogin() {
      // 备份
      //将即将post请求的数据，通过qs插件进行格式转换
      let login = this.$qs.stringify(this.form);
      // 发起post请求
      /*
					请求地址					http://127.0.0.1:8093/oauth/token
					提交的数据				qs打包成SON的字符串
					配置请求头/表头headers	application/x-www-form-urlencoded	【数据作为地址栏参数提交】
				*/
      instance
        .post("/oauth/token", login, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
        })
        .then((res) => {
          // 将请求成功的token存入本地存储中
          console.log(res);
          localStorage.setItem("token", res.data.access_token);
		  // this.$route

          // get请求：当前登录者的数据
          instance
            .get("/api/info/getUser")
            .then((res) => {
				this.$store.state.img = res.data.img;
				this.circleUrl = this.$store.state.img;
				ElMessage({
				  message: "登录成功",
				  type: "success",
				});
              localStorage.setItem("nickname", res.data.nickname);
			  console.log(localStorage.getItem("nickname"));
			  this.denglu = res.data.nickname;
              localStorage.setItem("acount", res.data.account);
              // role作用：1.确定登录者登录成功之后跳转到哪个页面：2.确定登录者能够访问的页面权限
              localStorage.setItem("role", res.data.role);
              this.dialogTableVisible = false;
			  this.form.username = "";
			  this.form.password = "";
              // 跳转：判断role === 买家账号：前台首页：role===后台管理员，后台首页
              if (res.data.role === "G") {
                // 管理元===>后台
                this.$router.push("/admin");
                return;
              } else {
                // 买家
                this.$router.push("/home");
                return;
              }
            })
            .catch((err) => {
				ElMessage.error('登录失败')
              console.log(err);
            });
        })
        .catch((error) => {
			ElMessage.error('登录失败')
          console.log(error);
        });
    },
    btn() {
		let a = localStorage.getItem("role");
		console.log(a);
      this.dialogTableVisible = true;
    },
	tuichu(){
		let a = localStorage.setItem("role",null);
		console.log(a);
		this.$router.push("/home");
		ElMessage.error('退出登录')
	}
  },
  // created() {
  // 	this.axios.get('/api/adm/')
  // }
};
</script>

<style scoped>
label {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
}

* {
  margin: 0px;
  padding: 0px;
}

el-menu-item {
  float: left;
}

.elheader {
  width: 100%;
  background-color: #3575ff;
}

.el-menu-demo {
  background-color: #3575ff;
}
</style>
